<template>
  <div class="app-container" style="overflow:auto;">
    <el-header
      v-if="options.filter"
    >
       <div class="el-table-filter">

       </div>
    </el-header>
    <el-table
      :data="list"
      border
      style="width: 100%"
      highlight-current-row
      v-loading="loading"
      element-loading-text="loading"
      max-height="400"
    >
      <template
        v-for="(item, index) in options.fields"
      >
        <template v-if="item.type">
         <template v-if="item.type === 'avatar'">
           <el-table-column
             :prop="item.prop"
             :label="item.label"
             align="center"
             :key="index"
           >
             <template #default="scope">
               <el-avatar :src="scope.row.avatarUrl"></el-avatar>
             </template>
           </el-table-column>
         </template>
        </template>
        <template v-else>
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            align="center"
            :key="index"
          > </el-table-column>
        </template>
      </template>
    </el-table>
    <el-footer>
      <el-pagination
        :page-size=paginationDate.rows
        :total=options.total
        :current-page=paginationDate.cuurentPage
        :page-sizes=paginationDate.pageSizes
        layout='total, prev, pager, next, jumper, sizes, slot'
        @size-change='handleSizeChange'
        @current-change='handleCurrentChange'
        style="line-height: 30px; min-width:300px;"
      >
        <i @click="handReload" class="el-icon-refresh"></i>
      </el-pagination>
    </el-footer>
  </div>
</template>
<script>
export default {
  name: 'Index',
  props: {
    list: {
      type: Array,
      required: true
    },
    options: {
      type: Object,
      required: true,
    },
    loading: {
      type: Boolean,
      default: false,
    },

  },
  data() {
    return {
      paginationDate: {
        total: 10,
        cuurentPage: 1,
        rows: 10,
        pageSizes: [10, 20, 30, 50]
      }
    }
  },
  methods: {
    init() {
    },
    handleSizeChange(val) {
      this.$emit('sizechange', val)
    },
    handleCurrentChange(val) {
      this.$emit('currentchange', val)
    },
    handReload() {
      this.$emit('reload')
    }
  },
  watch: {
    list: function(val) {
      console.log(val)
      this.list = val
    },
    options: function(val) {
      this.options = val
    },
    loading: function(val) {
      this.loading = val
    }
  }
}
</script>

<style scoped>

</style>
